<template>
  <div class="menubar">
    <div class="nav-box">
      <h4>我的账户</h4>
      <div class="account">
        <li @click="personFn()">个人中心</li>
        <li>消息通知</li>
        <li>个人信媳</li>
        <li>安全设置</li>
        <li>地址管理</li>
        <li>我的积分</li>
        <li>我的足迹</li>
        <li>邀请有礼</li>
        <li>幸运抽奖</li>
      </div>
      <h4>交易管理</h4>
      <div class="deal">
        <li @click="orderFn()">我的订单</li>
        <li>优惠券</li>
        <li>礼品卡</li>
        <li>评价晒单</li>
        <li>售后服务</li>
      </div>
      <h4>我的收藏</h4>
      <div class="collect">
        <li>收藏的商品</li>
        <li>收藏的专题</li>
        <li>关注的品牌</li>
      </div>
      <h4>帮助中心</h4>
      <div class="help">
        <li>帮助中心</li>
        <li>在线客服</li>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MenuBar",
  data() {
    return {};
  },
  methods:{
    personFn(){
       this.$router.push("/order/personal");
    },
    orderFn(){
        this.$router.push("/order/myorder");
    }
  }
};
</script>

<style lang="scss" scoped>
.menubar {
  width: 20%;
  height: 100%;
  background: white;
  .nav-box {
    // width: 50%;
    // height: 100%;
    // background: blue;
    // margin: 0 auto;
    h4 {
      font-size: 20px;
      font-weight: 400;
      padding: 20px 52px 5px;
    }
    .account,
    .deal,
    .collect,
    .help{
      padding: 0 52px 10px;
      line-height: 35px;
      li {
        width: 100%;
        color: #666666;
      }
      li:hover {
        color: #27ba9b;
      }
      border-bottom: 1px solid #f6f6f6;
    }
     .help{
         border:none;
     }
  }
}
</style>